<template>
	<view class="">
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="my-music-categories-backup" gettree>
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<!-- 基础用法 -->
				<!-- <view class="" v-for="(item,index) in data" :key="index">
					{{item.name}}
					<view class="text-sm text-primary" v-for="(child,cindex) in item.children">
						{{child.name}}
					</view>
				</view> -->

				<!-- <view class="" v-for="(item,index) in data" :key="index">
					<view class="flex">
						<view>{{item.name}}</view>
						<view>
							<checkbox-group @change="checkboxChange">
								<label>
									<checkbox :value="item._id" />
								</label>
							</checkbox-group>
						</view>
					</view>

					<view class="ml-10 text-sm text-primary" v-for="(child,cindex) in item.children">
						{{child.name}}
					</view>
				</view> -->
				<!-- <uni-data-picker placeholder="请选择分类" popup-title="请选择二级分类" @change="onchange" field="_id as value, name as text"
					collection="my-music-categories-backup" self-field="name" parent-field="parentID"></uni-data-picker> -->

				<uni-data-checkbox :multiple="true" v-model="value" :localdata="range" @change="change">
				</uni-data-checkbox>
			</view>
		</unicloud-db>
		<view class="">{{value}}</view>
		<!-- <view class="" v-for="(item,index) in checkCategory">{{item}}</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkCategory: [],
				value: 0,
				range: [{
					"value": 0,
					"text": "篮球"
				}, {
					"value": 1,
					"text": "足球"
				}, {
					"value": 2,
					"text": "游泳"
				}]
			}
		},
		methods: {
			change(e) {
				console.log('e:', e);
			},
			onchange(e) {
				const value = e.detail.value
				// console.log('当前选择的项:',value[0].text,value[0].value)
				console.log(value)
			},
			checkboxChange(e) {
				console.log(e.detail.value)
				if (e.detail.value.length != 0) {
					const findRes = this.checkCategory.findIndex((ee) => {
						return e.detail.value[0] == ee
					})
					findRes == -1 ? this.checkCategory.push(e.detail.value[0]) : this.checkCategory.splice(findRes, 1)
				} else {
					//this.checkCategory.splice(findRes,1)
				}

			}

		}
	}
</script>

<style>

</style>
